<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        textarea {
            /* 不允许自由更改大小 */
            resize: none;
        }

        div::after {}

        div:nth-child() {}

        input::placeholder {
            color: red;
        }

        input:checked {
            color: aqua;
        }
    </style>
</head>

<body>
    <!-- 
    action 提交地址
    method 提交方式  post  get
     -->
    <!-- <form action="test.js" method="GET">

        <label for="user">账号:</label>
        <input type="text" name="" id="" value="default" disabled> -->
    <!-- <input type="text" readonly value="aaaaa">
        <input type="text" placeholder="bbbbb">
        <input type="password" name="" id="" value="88888" readonly>

        <input type="text" maxlength="5">

        男<input type="radio" name="gender" id="" checked>
        女<input type="radio" name="gender" id="" disabled>
        不详<input type="radio" name="gender" id=""> -->


    <!-- 水煮肉片<input type="checkbox" name="" id="" checked>
        毛血旺<input type="checkbox" name="" id="" disabled>
        酸菜粉丝汤<input type="checkbox" name="" id="" readonly>

        <input type="color" name="" id="">
        <input type="date" name="" id="">
        <input type="email" name="" id="">
        <input type="month" name="" id="">

        <input type="button" value="+">
        <input type="button" value="-"> -->

    <!-- 自带提交功能 -->
    <!-- <input type="submit" value="提交">
        <button>提交</button> -->

    <!-- 重置按钮 只重置用户更改的值 -->
    <!-- <input type="reset" value="重置"> -->
    <!-- <button type="reset">重置22</button> -->

    <!-- 下拉列表 -->
    <!-- <select name="" id=""> -->
    <!-- <optgroup label="吃辣">
                <option value="" disabled>成都</option>
                <option value="">重庆</option>
            </optgroup>
            <optgroup label="不吃辣">
                <option value="" selected>上海</option>
                <option value="">杭州</option>
            </optgroup>
        </select>


        <textarea name="" id="" cols="30" rows="10" readonly>请输入。。。。</textarea>

    </form> -->

    <!-- <form action="">
        <label for="">账号</label>
        <input type="text" id="user">
        <label for="">密码</label>
        <input type="password" id="pwd">

        <label for="">男</label>
        <input type="radio" name="" id="" class="gender">
        <label for="">女</label>
        <input type="radio" name="" id="" class="gender">
        <label for="">教师</label>
        <input type="checkbox" class="job" value="教师">
        <label for="">骑手</label>
        <input type="checkbox" class="job" value="骑手">
        <label for="">滑手</label>
        <input type="checkbox" class="job" value="滑手">

        <select name="" id="">
            <option value="">成都</option>
            <option value="">重庆</option>
            <option value="">杭州</option>
            <option value="">上海</option>
        </select>

        <button>按钮</button>
    </form> -->

    <!-- 
    disabled:禁用元素
    readonly：元素只读不可以修改值，一般用于input可输入框和多行文本框，点击可以聚焦
    
    -->

    <form action="">
        <div>
            <label for="">账户名</label>
            <input type="text" name="" id="user" value="">
            <label for="">密码</label>
            <input type="password" name="" id="pwd">
        </div>

        <div>
            <label for="">女</label>
            <input type="radio" name="gender" id="" value="女">
            <label for="">男</label>
            <input type="radio" name="gender" id="" value="男">
            <label for="">不详</label>
            <input type="radio" name="gender" id="" value="不详">
        </div>

        <div>
            <label for="">教师</label>
            <input type="checkbox" name="" id="" value="教师">
            <label for="">滑手</label>
            <input type="checkbox" name="" id="" value="滑手">
            <label for="">车手</label>
            <input type="checkbox" name="" id="" value="车手">
            <label for="">骑手</label>
            <input type="checkbox" name="" id="" value="骑手">
        </div>

        <div>
            <select name="" id="">
                <option value="重庆">重庆</option>
                <option value="成都">成都</option>
                <option value="杭州">杭州</option>
                <option value="上海">上海</option>
            </select>
        </div>

        <button id="btn">渲染</button>

        <button id="submit">提交</button>
    </form>



    <script>

        let obj = {
            username: 'zhangsan',
            password: 111111,
            gender: '男',//单选框  男 选中 女
            job: '教师 滑手',//多选框 滑手 骑手 车手 教师
            address: '成都'//下拉  成都 重庆 杭州 上海
        }

        //渲染到对应的表单字段

        let btn = document.getElementById('btn');
        let submit = document.getElementById('submit');
        let user = document.getElementById('user');
        let pwd = document.getElementById('pwd');
        let radios = document.querySelectorAll("[type='radio']")
        let checkBoxes = document.querySelectorAll("[type='checkBox']")
        let options = document.getElementsByTagName('option');

        btn.onclick = function (event) {
            event.preventDefault();
            user.value = obj.username;
            pwd.value = obj.password;

            [...radios].map(function (item) {
                if (item.value == obj.gender) {
                    // item.checked=true;
                    item.setAttribute('checked', true)
                }

            })
            //'教师 滑手'
            let arr = obj.job.split(' ');
            // checkBoxes.forEach(function (item) {
            //     arr.forEach(function (job) {
            //         if (item.value == job) {
            //             item.setAttribute('checked', true)
            //         }
            //     })
            // });

            for (let j = 0; j < arr.length; j++) {
                for (let i = 0; i < checkBoxes.length; i++) {
                    if (checkBoxes[i].value == arr[j]) {
                        checkBoxes[i].setAttribute('checked', true);
                        break;
                    }
                }
            }
            [...options].forEach(function (item) {
                if (item.value == obj.address) {
                    item.selected = true;
                }

            })
        }


        submit.onclick = function (event) {
            event.preventDefault();
            obj.username = user.value;
            obj.password = pwd.value;
            radios.forEach(function (item) {
                if (item.checked) {
                    obj.gender = item.value;
                }
            })
            obj.job='';
            checkBoxes.forEach(function (item) {
                if (item.checked) {
                    obj.job += item.value + ' '
                }
            });
            [...options].forEach(function (item) {
                if (item.selected) {
                    obj.address = item.value;
                }

            })
            console.log(obj);

        }



    </script>

</body>

</html>